<template>
	<view>
		<view v-if="valueList.length" class="provinces-picker" @click="onCancel" @touchmove.prevent.stop>
			<view class="picker-view" @click.stop>
				<view class="title-view">
					<view class="cancel-but" @click="onCancel">取消</view>
					<view class="title-text">{{title || ''}}</view>
					<view class="confirm-but" @click="onConfirm">确定</view>
				</view>
				<picker-view class="picker-item" indicator-class="indicator-css" :value="valueList"
					@change="pickerChange">
					<picker-view-column>
						<view class="picker-text" v-for="(item, index) in list" :key="index">
							{{item[labelKey]}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "ProvincesPicker",
		props: {
			title: String,
			labelKey: {
				type: String,
				default: 'label'
			},
			value: {
				type: Array,
				default: () => [0]
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				valueList: [],
			};
		},
		beforeMount() {
			this.valueList = this.value
		},
		methods: {
			onCancel() {
				this.$emit('cancel')
			},
			onConfirm(event) {
				const index = this.valueList[0]
				this.$emit('confirm', {
					item: this.list[index],
					index,
					desc: this.list[index][this.labelKey]
				})
			},
			pickerChange(event) {
				this.valueList = event.detail.value
			}
		}
	}
</script>

<style scoped lang="scss">
	@keyframes open-animate {
		to {
			bottom: 0upx;
		}
	}

	@keyframes open-background {
		to {
			background: rgba($color: #000000, $alpha: 0.7);
		}
	}

	.provinces-picker {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 30;
		background: rgba($color: #000000, $alpha: 0);
		animation: open-background 0.7s forwards;

		.picker-view {
			width: 100%;
			height: 600upx;
			border-radius: 20upx 20upx 0 0;
			position: absolute;
			left: 0;
			bottom: -1000px;
			animation: open-animate 0.5s forwards;
			background: #FFF;

			.title-view {
				width: 100%;
				height: 96upx;
				@extend .row-between;

				.cancel-but {
					width: 100upx;
					height: 100%;
					@extend .column;
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B7A09A;
				}

				.title-text {
					font-size: 32upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #4D0F0B;
				}

				.confirm-but {
					@extend .cancel-but;
					color: #FF3E2F;
				}
			}

			.indicator-css {
				height: 50px;
				background: #F7F0EC;
				z-index: 0;
			}

			.picker-item {
				width: 100%;
				height: 520upx;

				.picker-text {
					width: 100%;
					height: 50px;
					@extend .column;
				}
			}
		}
	}
</style>